<template>
  <div class="topNav">
    <div class="logo" @click="gotoIndex">
      <img src="~/static/index/logo-text.svg" alt="" class="logo-img">
    </div>
      <div class="nav">
        <div class="login" v-show="isLogin == false" @click="loginShow = true">
          <img src="~/static/index/user.svg" alt="" class="user" />
          <p>未登陆</p>
        </div>
        <el-dropdown @command="handleCommand" trigger="click" v-show="isLogin == true">
          <span class="el-dropdown-link">
            <div class="login islogin">
              <img
                :src="userInfo.avatarUrl"
                alt=""
                class="user"
                style="
                  border: 1px solid #FF8D1A;
                  border-radius: 33px;
                "
              />
              <p style="color: rgba(255, 117, 18, 1)">
                {{ userInfo.username }}
                <i class="el-icon-arrow-down"></i>
              </p>
              
            </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in webList"
              :key="index"
              :command="item.url"
              >{{ item.name }}</el-dropdown-item
            >
            <el-dropdown-item divided command="signout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    <el-dialog
      title="用户登录"
      :visible="loginShow"
      width="300px"
      :before-close="handleClose"
    >
      <el-input v-model="account" placeholder="账号"></el-input>
      <el-input
        v-model="password"
        placeholder="密码"
        show-password
        style="margin-top: 12px"
      ></el-input>
      <div style="display: flex; justify-content: center">
        <div
          style="
            width: 250px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            margin-top: 20px;
            background: rgba(255, 117, 18, 1);
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
          "
          @click="handleChange"
        >
          登录
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookie from "js-cookie";
export default {
  name: "siteNav",
  props: {
    componentContent: {
      type: Object,
    },
  },
  computed: {},
  data() {
    return {
      isLogin: false,
      checked: 1,
      loginShow: false,
      account: "",
      password: "",
      data: {},
      userInfo: {},
      webList: [],
      click: true,
      times: null,
    };
  },
  created() {
    if (Cookie.get("token")) {
      this.isLogin = true;
      this.getWebList();
      this.getUserInfo();
    }
  },
  methods: {
    gotoIndex() {
      this.$router.push({ path: "/mobile/" });
    },
    handleChange() {
      if (this.times) {
        clearTimeout(this.times);
      }
      this.times = setTimeout(() => {
        this.login();
      }, 500);
    },
    async login() {
      let account = encrypt(this.account);
      let password = encrypt(this.password);
      let body = {
        username: account,
        password: password,
        rememberMe: false,
      };
      if (this.click) {
        const res = await this.$indexApi.login(body);
        if (res.code == 0) {
          this.click = false;
          this.data = res.data;
          Cookie.set("token", res.data.token);
          this.isLogin = true;
          this.account = "";
          this.password = "";
          this.$message({
            message: "登录成功",
            type: "success",
            duration: "1000",
            center: true,
          });
          this.getUserInfo();
          this.getWebList();
          this.loginShow = false;
        } else {
          this.$notify({
            title: "登录失败",
            message: "用户名/密码错误！",
            type: "warning",
          });
        }
      }
    },
    async getUserInfo() {
      const res = await this.$indexApi.getUserInfo();
      if (res.code == 0) {
        if (res.data == null) {
          this.isLogin = false;
        } else {
          this.userInfo = res.data.user;
        }
      }
    },
    async getWebList() {
      const res = await this.$indexApi.getWebList();
      if (res.code == 0) {
        if (res.data == null) {
          this.isLogin = false;
        } else {
          this.webList = res.data;
        }
      }
    },
    handleCommand(command) {
      if (command == "signout") {
        this.signout();
      } else {
        window.open(command, "_blank");
      }
    },
    async signout() {
      const res = await this.$indexApi.signout();
      if (res.code == 0) {
        this.click = true;
        this.isLogin = false;
        Cookie.remove("token");
        this.$message({
          message: "已退出",
          duration: "1000",
          center: true,
        });
        this.$router.push({ path: "/mobile" });
      }
    },
    handleClose() {
      this.loginShow = false;
      this.account = "";
      this.password = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.topNav {
  // width: 100%;
  height: 32px;
  // margin: 0px auto;
  padding: 8px 18px;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo{
    .logo-img{
      // width: 102px;
      height: 32px;
    }
  }
  .nav{
    display: flex;
    align-items: center;
    .login{
      display: flex;
      margin-left: 38px;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.56);
      .user{
        margin-right: 8px;
        width: 16px;
        height: 16px;
      }
    }
    .menu{
      margin-left: 17px;
      margin-top: 4px;
      .icon{
        width: 16px;
        height: 18px;
      }
    }
  }
}

</style>
